import type { ProColumns } from '@ant-design/pro-components';
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';

import type { Opinion } from '@fill/client';
import { rspc } from '@fill/client';
import { Form } from 'antd';
import { useEffect, useState } from 'react';
import { QUESTION_ENUM } from '../../constants/default';

export const useOpinionDetail = () => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  const [show, setShow] = useState(false);
  const [record, setRecord] = useState<Opinion>();
  const [slugsData, setSlugsData] = useState<string[]>([]);

  const { data } = rspc.useQuery(['opnions.slugs', { arg: null }]);

  const showDetail = (records: Opinion) => {
    console.log(records);
    setShow(true);
    setRecord(records);
  };

  useEffect(
    () => {
      const _slugsData: string[] = [];

      data?.map(({ slug }) => _slugsData.push(slug));
      console.log(data);
      setSlugsData(_slugsData);
    },
    [data],
  );

  const columns: ProColumns<Opinion>[] = [
    {
      dataIndex: 'index',
      title: '序号',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '问题分类',
      dataIndex: 'slug',
      valueEnum: QUESTION_ENUM,
      width: 415,
    },
    {
      title: '问题方面',
      dataIndex: 'description',
      width: 310,
    },
    {
      title: '具体问题',
      dataIndex: 'content',
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 100,
      render: (_text, record, _, _action) => [
        <a rel="noopener noreferrer" key="view" onClick={() => showDetail(record)}>
          查看
        </a>,
      ],
    },
  ];

  return {
    columns,
    slugsData,
    modalForm: (
      <ModalForm<{
        name: string
        company: string
      }>
        title="反馈意见"
        open={show}
        form={form}
        layout={'horizontal'}
        labelCol={{
          span: 3,
        }}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setShow(false),
        }}
        submitter={{
          render: (props, dom) => {
            return [
              ...dom,
            ];
          },
          resetButtonProps: {
            // type: 'dashed',
          },
          submitButtonProps: {
            style: {
              display: 'none',
            },
          },
        }}
        readonly
      >
        <div style={{ height: 20 }}></div>
        <ProFormSelect name="slug" disabled label="问题分类" initialValue={record?.slug} valueEnum={QUESTION_ENUM} />
        <ProFormText name="description" disabled label="问题方面" initialValue={record?.description} />
        <ProFormTextArea initialValue={record?.content} disabled fieldProps={{
          style: { height: '200px' },
        }} name="content" label="具体问题" />
        <ProFormTextArea disabled name="remark" placeholder="" initialValue={record?.remark} label="备注" />
      </ModalForm>
    ),
  };
};
